<template>
  <div class="search">
    <!-- 轮播图 -->
    <el-carousel indicator-position="outside" style="height: 350px">
      <el-carousel-item>
        <img src="./images/1.png" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="./images/2.png" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="./images/3.png" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="./images/4.png" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Search",
  data() {
    return {
      serachForm: {
        key: "",
      },
      hotSearch: [],
      imgs: [
        "./images/1.png",
        "./images/2.png",
        "./images/3.png",
        "./images/4.png",
      ],
    };
  },
  methods: {
    search() {
      this.$emit("search", this.serachForm.key);
      this.serachForm.key = "";
    },
    getHotSearch() {
      this.hotSearch = [];
      for (let index = 0; index < 4; index++) {
        let Coffee =
          this.CoffeeList[Math.floor(Math.random() * this.CoffeeList.length)];
        this.hotSearch.push(Coffee);
      }
    },
    detail(Coffee) {
      this.$router.push("/Coffee");
      this.$store.commit("DETAIL", Coffee);
    },
  },
  mounted() {
    this.getHotSearch();
  },
  computed: {
    ...mapState({
      CoffeeList: (state) => state.CoffeeList,
    }),
  },
};
</script>

<style scoped>
.search {
  height: 350px;
  /* background: url(./images/beijing.jpg);
  display: flex;
  justify-content: center;
  align-items: center; */
} /**背景图片*/
.search img {
  display: block;
  width: 100%;
  height: 410px;
}
.search_box {
  height: 200px;
  width: 450px;
}

.title {
  text-align: center;
  color: white;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1.5px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding-bottom: 20px;
} /**Pick 标题的设置*/

.search_item {
  margin: 0px 0px;
}

.hotSearch {
  cursor: pointer; /**当鼠标移动到该单元格上时,鼠标会由箭头形状改为手的形状**/
  text-align: center;

  color: white;
  font-size: 15px;
  padding-top: 15px;
} /**热门搜索的设置*/

.active:hover {
  color: black;
}
</style>
